<template>
  <div class="commentItem">
    <div class="user">
      <img :src="item.user.avatarUrl" />
      <span>{{ item.user.nickname }}</span>
      <span>({{item.time|formatTime}})</span>
    </div>
    <div class="content">
      <p>{{ item.content }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: ["item"],
  filters: {
    formatTime(val) {
      let d = new Date(val);
      return d.getFullYear()+'年'+(d.getMonth()+1)+'月'+d.getDate()+'日'
    },
  },
};
</script>

<style lang="less" scoped>
.commentItem {
  display: flex;
  flex-direction: column;
  padding: 7px;
  font-size: 14px;
  border-bottom: 1px solid #ccc;
  .user {
    img {
      width: 10vw;
      height: 10vw;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 2vw;
    }
    span{
      margin-right: 10px;
      font-size: 12px;
      color: rgb(95, 88, 88);
    }
  }
  
  margin-top: 5px;
  .content {
    margin-left: 12vw;
  }
}
</style>